<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>为搜索框绑定样式</title>
<style>

</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example">
	<div>
        <form v-bind:style="searchForm">
            <input v-bind:style="searchInput" type="text" placeholder="搜索">
            <input v-bind:style="searchButton" type="submit" value="搜索">
        </form>
    </div>
</div>
<script type="text/javascript">
var vm = new Vue({
	el:'#example',
	data:{
		searchForm : {//表单样式
			border: '2px solid #F03726',
    		'max-width': '670px'
		},
		searchInput : {//文本框样式
			'padding-left': '5px',
			height: '46px',
			width: '78%',
			outline: 'none',
			'font-size': '12px',
			border: 'none'
		},
		searchButton : {//按钮样式
			height: '46px',
			width: '20%',
			float: 'right',
			background: '#F03726',
			color: '#F5F5F2',
			'font-size': '18px',
			cursor: 'pointer',
			border: 'none'
		}
	}
})
</script>


</body>

</html>



